<template>
    <div>
        <div class="hd-title">
            <h3>装备视频</h3>
            <p>Equipment video</p>
        </div>
        <div class="video-box" v-loading="loading">
            <videoItem v-for="(item, index) in equipmentList.video" :key="index" :item="item" />
        </div>

        <div class="hd-title">
            <h3>装备图片</h3>
            <p>Equipment pictures</p>
        </div>
        <div class="video-box" v-loading="loading">
            <videoItem v-for="(item, index) in equipmentList.img" :key="index" :item="item" />
        </div>
    </div>
</template>

<script>
import videoItem from './videoItem.vue'
import { getEquipment } from "@/api/apis"
export default {
    name: "zbShowModule",
    components: {
        videoItem
    },
    data () {
        return {
            loading: true,
            supplierId: '',// 供应商id
            equipmentList: {},// 装备展示列表
        }
    },
    mounted () {
        if (this.$route.query.id) {
            this.supplierId = Number(this.$route.query.id)
        }
        if (this.supplierId) {   
            this.getData();
        }
    },
    methods: {
        // 获取装备展示列表
        getData () {
            let that = this
            that.loading = true
            getEquipment({ id: this.supplierId }).then(res => {
                if (res.code === 1) {
                    that.equipmentList = res.data
                } else {
                    this.$message.error(res.msg)
                }
                that.loading = false
            })
        },
    }
}
</script>

<style lang="less" scoped>
.nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(25%, 1fr));

    .nav-item {
        position: relative;
        text-align: center;
        padding: 15px;
        font-size: 20px;
        color: #fff;
        background: #f15953;
        cursor: pointer;

        &:not(:last-child) {
            &::after {
                content: '';
                position: absolute;
                top: 10%;
                right: 0;
                width: 2px;
                height: 80%;
                background-color: #fff;
            }
        }

        h3 {
            position: relative;
            font-weight: 500;
            overflow: hidden;

            &::before {
                content: '\e791';
                font-family: element-icons !important;
                font-size: 14px;
                position: absolute;
                left: -20px;
                /* 初始位置在左侧外部 */
                top: 50%;
                transform: translateY(-50%);
                transition: left 0.5s ease;
                /* 淡入动画 */
            }

            &::after {
                content: '\e792';
                font-family: element-icons !important;
                font-size: 14px;
                position: absolute;
                right: -20px;
                /* 初始位置在右侧外部 */
                top: 50%;
                transform: translateY(-50%);
                transition: right 0.5s ease;
                /* 淡入动画 */
            }
        }

        &.active {
            background: #ef312a;
        }

        &:hover,
        &.active {
            h3 {
                &::before {
                    left: 30%;
                }

                &::after {
                    right: 30%;
                }
            }
        }
    }
}

.hd-title {
    text-align: center;
    margin-top: 30px;

    h3 {
        font-size: 28px;
        font-weight: 700;
        color: #2E3033;
    }

    p {
        font-size: 14px;
        color: rgba(46, 48, 51, .6);
        margin-top: 10px;
    }
}

/deep/.el-input__suffix {
    right: 0;
}

.orderBy {
    .el-button {
        border-color: transparent;

        &.el-button--danger:hover {
            color: #fff;
        }

        &:hover {
            color: #000;
            background-color: transparent;
        }
    }
}

.video-box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 30px;
}
</style>